<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基线检查</title>
    <style>
        /* 设置页面整体的背景渐变 */
        body {
            background: linear-gradient(135deg, #f0f4f8, #d0e8f2);
            font-family: 'Roboto', sans-serif;
            /* 使用更加现代的Roboto字体 */
            color: #333;
            /* 全局文本颜色 */
        }

        /* 头部区域样式 */
        .header {
            background: linear-gradient(135deg, #87cefa, #6ab7f5);
            padding: 25px;
            text-align: center;
            color: white;
            font-size: 26px;
            width: 100%;
            margin: 0 auto;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            font-weight: bold;
            /* 使标题更突出 */
        }

        /* 容器布局 */
        .container {
            display: flex;
            width: 95%;
            justify-content: space-between;
            margin: 30px auto;
            gap: 20px;
            flex-wrap: wrap;
        }

        /* 基础盒子样式，增加渐变背景和圆角 */
        .box {
            flex: 0 0 45%;
            padding: 20px;
            background: white;
            border-radius: 20px;
            /* 圆角加大 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
            /* 加大阴影，提升立体感 */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            /* 添加平滑的变换效果 */
            margin: 20px auto;
            border: none;
            /* 去掉边框，使用阴影效果 */
        }

        .box:hover {
            transform: translateY(-8px);
            /* 鼠标悬停时，盒子上移效果 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            /* 增加阴影效果 */
        }

        /* 标题样式，字体加粗并增加下方间距 */
        h2 {
            text-align: center;
            color: #495057;
            font-size: 24px;
            margin-bottom: 15px;
            font-weight: 700;
            /* 加粗字体 */
        }

        /* 表格样式，增强对比度并增加间距 */
        table {
            border-collapse: collapse;
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
            /* 实现圆角效果 */
        }

        table tr {
            background-color: #f9f9f9;
        }

        table tr:nth-child(even) {
            background-color: #f0f4f8;
            /* 偶数行使用不同背景色，增强可读性 */
        }

        table tr td {
            border: 1px solid #dee2e6;
            padding: 15px;
            /* 增加单元格内边距 */
            text-align: center;
            font-size: 16px;
        }

        /* 针对小屏幕的响应式设计 */
        @media (max-width: 768px) {
            .box {
                flex: 0 0 100%;
                /* 小屏幕上每个盒子占据100%宽度 */
                margin: 15px 0;
            }
        }

        .hidden {
            display: none;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 6px solid #c3cfe2;
            border-top: 6px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>

    <div class="header">
        <h3>linux安全基线检查</h3>
    </div>

    <div id="loading-message" style="display:flex; 
    justify-content:center; 
    align-items:center; 
    height:100vh; color:#666; 
    flex-direction:column; 
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2); ">
        <div class="spinner"></div>
        <p style="margin-top:20px; font-size:18px;">脚本正在执行中...</p>
    </div>

    <div class="hidden">

        <div class="box" style="width: 90%;">
            <h2>基础信息</h2>
            <div id="table-container-1"></div>
        </div>

        <div class="box" style="width: 90%;">
            <h2>检查结果</h2>
            <div id="summary-table-container"></div>
        </div>

        <div class="container">
            <div class="box">
                <h2>账号策略检查</h2>
                <div id="table-container-2"></div>
            </div>
            <div class="box">
                <h2>登录超时检查</h2>
                <div id="table-container-3"></div>
            </div>
        </div>

        <div class="container">
            <div class="box">
                <h2>特权用户检查</h2>
                <div id="table-container-4"></div>
            </div>
            <div class="box">
                <h2>空登录口令用户检查</h2>
                <div id="table-container-5"></div>
            </div>
        </div>

        <div class="container">
            <div class="box">
                <h2>用户缺省权限检查</h2>
                <div id="table-container-6"></div>
            </div>
            <div class="box">
                <h2>系统关键目录权限检查</h2>
                <div id="table-container-7"></div>
            </div>
        </div>

        <div class="container">
            <div class="box">
                <h2>SSH配置检查</h2>
                <div id="table-container-8"></div>
            </div>
            <div class="box">
                <h2>ping服务检查</h2>
                <div id="table-container-9"></div>
            </div>
        </div>

        <div class="container">
            <div class="box">
                <h2>telnet服务检查</h2>
                <div id="table-container-10"></div>
            </div>
            <div class="box">
                <h2>远程连接的安全性配置检查</h2>
                <div id="table-container-11"></div>
            </div>
        </div>

        <div class="container">
            <div class="box">
                <h2>异常隐含文件检查</h2>
                <div id="table-container-12"></div>
            </div>
            <div class="box">
                <h2>syslog登录事件检查</h2>
                <div id="table-container-13"></div>
            </div>
        </div>

        <div class="container">
            <div class="box">
                <h2>日志审核功能检查</h2>
                <div id="table-container-14"></div>
            </div>
            <div class="box">
                <h2>系统core dump状态检查</h2>
                <div id="table-container-15"></div>
            </div>
        </div>

    </div>

    <script>
        let intervalId;

        function loadJSONData() {
            fetch('linuxcheck.json')
                .then(response => response.json())
                .then(data => {
                    // 数据加载完成后，隐藏 "正在加载" 提示
                    document.getElementById('loading-message').style.display = 'none';

                    // 显示其他内容
                    document.querySelectorAll('.hidden').forEach(element => {
                        element.classList.remove('hidden');
                    });

                    // 停止轮询
                    clearInterval(intervalId);

                    function createSummaryTable(data, containerId) {
                        const container = document.getElementById(containerId);
                        const table = document.createElement('table');
                        const thead = document.createElement('thead');
                        const tbody = document.createElement('tbody');

                        const headerRow = document.createElement('tr');
                        ['检查项目数', '未通过项', '得分'].forEach(header => {
                            const th = document.createElement('th');
                            th.textContent = header;
                            headerRow.appendChild(th);
                        });
                        thead.appendChild(headerRow);

                        let totalYN = 0;
                        let failCount = 0;

                        Object.keys(data).forEach(category => {
                            const rows = data[category];
                            totalYN += rows.filter(row => row.YN).length;
                            failCount += rows.filter(row => row.YN === 'N').length;
                        });

                        const score = totalYN > 0 ? Math.floor(((totalYN - failCount) / totalYN) * 100) : 0;

                        const tr = document.createElement('tr');
                        const totalYNTd = document.createElement('td');
                        totalYNTd.textContent = totalYN;
                        tr.appendChild(totalYNTd);

                        const failCountTd = document.createElement('td');
                        failCountTd.textContent = failCount;
                        tr.appendChild(failCountTd);

                        const scoreTd = document.createElement('td');
                        scoreTd.textContent = score;
                        tr.appendChild(scoreTd);

                        tbody.appendChild(tr);
                        table.appendChild(thead);
                        table.appendChild(tbody);
                        container.appendChild(table);
                    }

                    createSummaryTable(data, 'summary-table-container');

                    function generateTableOne(data, containerId) {
                        const container = document.getElementById(containerId);
                        const table = document.createElement('table');
                        const items = data.one;

                        for (let i = 0; i < items.length; i += 2) {
                            const tr = document.createElement('tr');
                            const td1 = document.createElement('td');
                            td1.textContent = `${items[i].key}: ${items[i].value}`;
                            tr.appendChild(td1);

                            if (i + 1 < items.length) {
                                const td2 = document.createElement('td');
                                td2.textContent = `${items[i + 1].key}: ${items[i + 1].value}`;
                                tr.appendChild(td2);
                            } else {
                                const td2 = document.createElement('td');
                                tr.appendChild(td2);
                            }

                            table.appendChild(tr);
                        }

                        container.appendChild(table);
                    }

                    function generateTable(data, containerId) {
                        const container = document.getElementById(containerId);
                        const table = document.createElement('table');
                        const thead = document.createElement('thead');
                        const headerRow = document.createElement('tr');

                        ['结果描述', '检查结果'].forEach(header => {
                            const th = document.createElement('th');
                            th.textContent = header;
                            headerRow.appendChild(th);
                        });

                        thead.appendChild(headerRow);
                        table.appendChild(thead);

                        const tbody = document.createElement('tbody');
                        data.forEach(row => {
                            const tr = document.createElement('tr');
                            const descTd = document.createElement('td');
                            descTd.textContent = row.text;
                            tr.appendChild(descTd);

                            const ynTd = document.createElement('td');
                            ynTd.textContent = row.YN;
                            tr.appendChild(ynTd);

                            tbody.appendChild(tr);
                        });

                        table.appendChild(tbody);
                        container.appendChild(table);
                    }

                    generateTableOne(data, 'table-container-1');

                    const categories = Object.keys(data).slice(1);
                    categories.forEach((category, index) => {
                        const containerId = `table-container-${index + 2}`;
                        generateTable(data[category], containerId);
                    });
                })
                .catch(error => {
                    console.error('获取 JSON 数据时出错:', error);
                });
        }

        // 每5秒检查一次
        intervalId = setInterval(loadJSONData, 2000);

    </script>

</body>

</html>